<template>
  <div>
    <el-card class="header">
      <el-button type="primary" size="mini" @click="handleCreate()"
        >新增</el-button
      >
      <el-button type="primary" size="mini" @click="$router.go(-1)"
        >返回</el-button
      >
    </el-card>
    <el-card style="margin-top: 10px">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(12,42,98, 0.9)"
      >
        <el-table-column type="index" label="序号" align="center" width="80">
          <template slot-scope="scope">
            <span :title="scope.row.id"> {{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="id" width="60" align="center" label="编号">
        </el-table-column>
        <el-table-column
          prop="dictValue"
          align="center"
          width="120"
          label="场景编码 "
        >
        </el-table-column>
        <el-table-column prop="dictName" align="center" label="场景名称">
        </el-table-column>

        <el-table-column label="标题" align="center" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" v-if="scope.row.title" placement="top">
              <p>{{ scope.row.title }}</p>
              <p>{{ scope.row.content }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.title }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="title"
                        label="标题 ">
        </el-table-column>
        <el-table-column prop="content"
                        label="内容 ">
        </el-table-column> -->
        <!-- <el-table-column prop="dictSort"
                        label="排序">
        </el-table-column> -->
        <!-- <el-table-column label="状态">
          <template slot-scope="scope">
            {{scope.row.status == 0 ? '正常' : '停用'}}
          </template>
        </el-table-column> -->
        <el-table-column label="图片" align="center" width="160">
          <template slot-scope="scope">
            <img
              :src="fetchImg(scope.row.uploadPath)"
              alt=""
              v-if="scope.row.uploadPath"
              @click="handleLookImg(scope.row.uploadPath)"
              class="sm_img"
            />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <!-- <p>姓名: {{ scope.row.name }}</p> -->
              <p>{{ scope.row.remark }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium" v-if="null != scope.row.remark">{{
                  scope.row.remark.length < 20
                    ? scope.row.remark
                    : scope.row.remark.substr(0, 20) + "..."
                }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="remark"
                        label="备注">
          <template slot-scope="scope">
            <span>{{scope.row.remark.length<100?scope.row.remark:scope.row.remark.substr(0,100)+'...'}}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="createTime" align="center" label="创建时间">
        </el-table-column>
        <el-table-column prop="name" align="center" label="操作 ">
          <template slot-scope="scope">
            <el-button
              @click="handleEdit(scope.row.id)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹框 -->
    <el-dialog
      title="添加场景信息"
      v-if="isShowForm"
      top="5vh"
      :visible.sync="isShowForm"
      width="80%"
    >
      <div>
        <div class="box-card">
          <!-- <el-form-item label=""> -->

          <div class="scene_title">
            <span class="scene_name"> 输入场景名称： </span>
            <el-input
              style="width: 500px"
              placeholder="输入场景名称"
              v-model="form.dictName"
            >
            </el-input>
          </div>
          <div class="scene_title">
            <span class="scene_name"> 是否前端展示： </span>
            <el-radio-group v-model="form.isShow">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
          <div class="scene_title">
            <span class="scene_name"> 是否图片： </span>
            <el-radio-group v-model="form.isImg">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
          <div class="scene_title">
            <span class="scene_name"> 场景是否唯一： </span>
            <el-radio-group v-model="form.isOnlyScene">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
          <div class="scene_title">
            <span class="scene_name"> 输入场景编码： </span>
            <el-input
              style="width: 500px"
              placeholder="请输入场景编码"
              v-model="form.dictValue"
            >
            </el-input>
          </div>
          <div class="scene_title">
            <span class="scene_name"> 输入标题： </span>
            <el-input
              style="width: 500px"
              placeholder="请输入标题"
              v-model="form.title"
            >
            </el-input>
          </div>
          <div class="scene_title">
            <span class="scene_name"> 输入内容： </span>
            <el-input
              type="textarea"
              :rows="3"
              style="width: 500px"
              placeholder="请输入内容"
              v-model="form.content"
            >
            </el-input>
          </div>
          <span class="scene_name"> 输入json数据： </span>
          <el-input
            type="textarea"
            :rows="3"
            style="width: 500px"
            placeholder="请输入内容"
            v-model="form.remark"
          >
          </el-input>
          <!-- </el-form-item> -->
          <el-button @click="submit()" type="primary">解析 </el-button>

          <el-button @click="showImg()" type="primary">上传图片</el-button>
        </div>
        <div class="box-card" style="margin-top: 10px">
          <!-- <div v-for="item in dataList"
               :key="item.id">
            {{item.jsonKey}}

            {{item.value}}
            {{item.coordinateX}}
            {{item.coordinateY}}

          </div> -->

          <el-table :data="dataList" border>
            <el-table-column type="index" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="jsonKey" label="标题" align="center">
            </el-table-column>
            <el-table-column prop="value" label="值" align="center">
            </el-table-column>
            <el-table-column prop="coordinateX" label="x轴" align="center">
            </el-table-column>
            <el-table-column prop="coordinateY" label="y轴" align="center">
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="addXy(scope.row, scope)"
                  >添加坐标</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog
          title="选择坐标"
          :modal="false"
          width="60%"
          :visible.sync="isShowXy"
        >
          <div @click="getMouseXY($event)" class="btn_class">
            <img :src="form.uploadPath" class="avatar" />
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isShowXy = false">取 消</el-button>
            <el-button type="primary" @click="isShowXy = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>

        <el-dialog
          title="上传图片"
          width="60%"
          :modal="false"
          :visible.sync="isShowUploadImg"
        >
          <el-upload
            class="avatar-uploader act_img"
            :action="uploadUrlAction"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form.uploadPath" :src="form.uploadPath" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isShowUploadImg = false">取 消</el-button>
            <el-button type="primary" @click="isShowUploadImg = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowForm = false">取 消</el-button>
        <el-button type="primary" @click="submitDicData()">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog title="查看图片" width="60%" :visible.sync="isImgShow">
      <img :src="imgUrl" alt="" class="_img" />
    </el-dialog>
  </div>
</template>

<script>
// import pagegation from '../../components/pagination'
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      isShowForm: false,
      isImgShow: false,
      imgUrl: "",
      form: {
        dictName: "",
        dicValue: "",
        dictSort: "",
        remark: "",
        uploadPath: "",
        title: "",
        content: "",
        dictType: "send_activity",
        isShow: 0,
        isImg: 0,
        isOnlyScene: 0,
      },
      status: 0,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      dicId: null,
      isShow: false,
      dialogFormVisible: false,
      isShowXy: false,
      isShowUploadImg: false,
      index: "",
      dataForm: {
        jsonData:
          '[{"jsonKey":"标签名称","value":"A标签"},{"jsonKey":"标签字段","value":"AABianqian"}]',
      },
      dataList: [],
      uploadUrl: "",
      uploadUrlAction: "",
      imageUrl: "/uploadFile/f7872232-4f37-4c44-8af9-35092559bf6f.jpeg",
      list: [],
    };
  },
  created() {
    this.uploadUrlAction = this.$http.adornUrl(
      `/api/upload?token=${this.$cookie.get("token")}`
    );
    // this.fetchTableList();
  },
  activated(){
    this.fetchTableList();
  },
  methods: {
    fetchImg(url) {
      return this.$http.adornUrl(url);
    },
    handleLookImg(url) {
      this.isImgShow = true;
      this.imgUrl = this.$http.adornUrl(url);
    },
    showImg() {
      this.form.uploadPath = "";
      this.isShowUploadImg = !this.isShowUploadImg;
    },
    handleAvatarSuccess(res, file) {
      this.uploadUrl = res.url;
      this.form.uploadPath = this.$http.adornUrl(`${res.url}`);
    },
    //获取坐标
    getMouseXY(event) {
      console.info(event.offsetX + "," + event.offsetY);

      this.dataList[this.index].coordinateX = event.offsetX + "";
      this.dataList[this.index].coordinateY = event.offsetY + "";
      console.info(this.dataList);
      this.dataList = JSON.parse(JSON.stringify(this.dataList));
    },
    //点击确定
    submit() {
      console.info(this.form.remark);
      if (this.form.remark) {
        let reg = /\\/g;
        //使用replace方法将全部匹配正则表达式的转义符替换为空
        let replaceAfter = this.form.remark.replace(reg, "");
        this.dataList = JSON.parse(JSON.stringify(JSON.parse(replaceAfter)));
        for (let x in this.dataList) {
          // if (this.dataList[x].key) {
          //   this.dataList[x].jsonKey = this.dataList[x].key
          // }
          this.dataList[x].coordinateX = "";
          this.dataList[x].coordinateY = "";
        }
      }
    },
    addXy(row, index) {
      console.log(row, index);
      this.isShowXy = !this.isShowXy;
      // this.uploadUrl = row.
      this.index = index.$index;
    },
    // 修改
    handleEdit(id) {
      console.info("this.form.uploadPath:" + this.form.uploadPath);
      this.dicId = id;
      this.$http({
        url: this.$http.adornUrl(`/sysdictdata/info/${id}`),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.isShowForm = true;
          this.form = data.sysDictData;
          this.status = Number(data.sysDictData.status);
          this.dataList = data.list;
          console.log(this.dataList, "ddddddd");
          this.form.uploadPath = this.$http.adornUrl(
            `${data.sysDictData.uploadPath}`
          );
          // this.form.uploadPath = this.uploadUrl
        }
      });
    },
    // 删除
    handleDelete(id) {
      let ids = [id];
      this.$confirm(`您确定要删除吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/sysdictdata/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.fetchTableList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 弹框确定
    submitDicData() {
      if (this.dicId) {
        this.handleUpdateDic();
      } else {
        this.handleAddDic();
      }
    },
    // 新增
    handleAddDic() {
      let xList = [];
      let yList = [];
      let jsonKey = [];
      this.dataList.forEach((item, index) => {
        xList.push(item.coordinateX);
        yList.push(item.coordinateY);
        jsonKey.push(item.jsonKey);
      });
      this.form.coordinateX = xList;
      this.form.coordinateY = yList;
      this.form.jsonKey = jsonKey;
      this.form.uploadPath = this.uploadUrl;

      this.$http({
        url: this.$http.adornUrl("/sysdictdata/save"),
        method: "post",
        data: this.$http.adornData(this.form),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.fetchTableList();
          this.dialogVisible = false;
        }
      });
    },
    // 修改
    handleUpdateDic() {
      let xList = [];
      let yList = [];
      let jsonKey = [];
      this.dataList.forEach((item, index) => {
        xList.push(item.coordinateX);
        yList.push(item.coordinateY);
        jsonKey.push(item.jsonKey);
      });
      this.form.coordinateX = xList;
      this.form.coordinateY = yList;
      this.form.jsonKey = jsonKey;
      this.form.uploadPath = this.uploadUrl;
      this.$http({
        url: this.$http.adornUrl("/sysdictdata/saveVo"),
        method: "post",
        data: this.$http.adornData(this.form),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.fetchTableList();
          this.isShowForm = true;
          this.dialogVisible = false;
          this.isShowForm = false;
        } else {
          this.$message({
            message: data.msg,
            type: "error",
          });
        }
      });
    },
    fetchTableList() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl("/sysdictdata/getList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageNum,
          limit: this.pageSize,
          dictType: this.form.dictType,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // this.total = data.page.totalCount
          setTimeout(() => {
            this.loading = false;
            console.info(data);
            this.tableData = data.list;
          }, 1000);
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 新增
    handleCreate() {
      this.form.title = "";
      this.form.content = "";
      this.dicId = "";
      console.info(this.$data.form);
      Object.assign(this.$data.form, this.$options.data().form);
      console.info(this.$data.form);
      console.info(this.$options.data().form);
      Object.assign(this.$data.dataList, this.$options.data().dataList);
      this.isShowForm = true;
    },
    pageChange(page) {
      console.log(page);
      this.pageSize = page._pageSize;
      this.pageNum = page._currentPage;
      this.fetchTableList();
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
}
.el-upload {
  width: 100% !important;
}
._img {
  width: 100%;
  height: auto;
  cursor: pointer;
}
.sm_img {
  width: auto;
  height: 80px;
  cursor: pointer;
}
.act_img,
.btn_class {
  width: 100%;
  height: 350px;
  text-align: center;
  line-height: 350px;
}
.act_img img {
  width: 100%;
  height: 100%;
}
.el-icon-plus {
  font-size: 30px;
}
.scene_name {
  display: inline-block;
  width: 120px;
  text-align: right;
}
.scene_title {
  margin-bottom: 10px;
}
</style>